* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.typed-cursor {
	opacity: 0;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}

body {
	width: 100vw;
	overflow-x: hidden;
}
/* banner*/
.banner {
	width: 100vw;
	height: 50vh;
	// background-color: #3a8371;
	background: url(../img/bannerBg.jpg);
	background-size: 100%;
	position: relative;
	.content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.avatar {
			width: 35%;
			height: 35%;
			border-radius: 50%;
			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		p {
			color: #fff;
			margin-top: 15px;
			letter-spacing: 8px;
			text-align: center;
		}
		p.title {
			width: 120%;
			font-size: 2.5em;
			position: absolute;
			top: 71%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		p.desc {
			margin-top: 10vh;
			font-size: 1.2em;
		}
	}
}
/* nav*/
nav {
	width: 100vw;
	height: 70px;
	background-color: #4a4a4a;
	position: sticky;
	top: 0;
	z-index: 30;
	ul {
		margin-left: 10%;
		width: 80%;
		background: transparent;
		display: flex;
		li {
			height: 100%;
			width: 80px;
			margin-right: 30px;
			text-align: center;
			transition: all 0.3s linear;
			&:hover {
				background-color: #3f413f;
			}
			a {
				color: #fff;
				font-size: 1.3em;
				line-height: 70px;
				width: 100%;
				height: 100%;
			}
		}
	}
}
/*main*/
.main {
	width: 100vw;
	background-color: #efedee;
	.w {
		padding-top: 10px;
		width: 80vw;
		margin-left: 10vw;
		margin-right: 10vw;
		background-color: #efedee;
		display: flex;
		.left {
			flex: 1;
			margin-right: 10px;
			.user_info {
				background-color: #fff;

				.avatar {
					position: relative;
					height: 20vh;
					img {
						width: 15vh;
						height: 15vh;
						border-radius: 50%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						transition: all 0.5s;
						&:hover {
							transform: translate(-50%, -50%) rotate(360deg);
						}
					}
				}
				p {
					text-align: center;
					padding: 10px 0;
					font-size: 20px;
				}
				.tip {
					display: flex;
					justify-content: center;
					align-items: center;
					.tip_item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						span {
							padding: 5px;
						}
					}
				}
				.desc {
					height: 15vh;
					background-color: #3a8371;
					color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: flex-start;
					h1 {
						font-size: 18px;
						padding-left: 20px;
					}
					p {
						padding-left: 20px;
						font-size: 14px;
					}
				}
				.notice {
					line-height: 10vh;
					padding-left: 30px;
					color: #3a8371;
				}
				.picture {
					ul {
						padding: 10px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: flex-start;
						li {
							width: 100%;
							padding: 12px 0;
							border-bottom: 2px dotted #8e998e;
							a {
								display: block;
								.cover {
									float: left;
									width: 8vh;
									height: 8vh;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.artical_info {
									float: left;
									margin-left: 5px;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									color: #3a8371;

									p.article {
										padding: 10px;
									}
									p.time {
										font-size: 12px;
										padding-left: 60px;
									}
								}
							}
						}
					}
				}
				h3 {
					line-height: 5vh;
					background-color: #3a8371;
					color: #fff;
					padding-left: 25px;
				}
				.search {
					height: 13vh;
					display: flex;
					justify-content: center;
					align-items: center;
					input {
						height: 30px;
						outline: none;
						padding-left: 10px;
						border: 1px solid #ccc;
					}
					span {
						display: inline-block;
						line-height: 30px;
						width: 60px;
						margin-left: 3px;
						background-color: #eaeaea;
						text-align: center;
						border-radius: 2px;
						color: #333;
					}
				}
			}
			.user_article {
				background-color: #fff;
				h3 {
					line-height: 5vh;
					background-color: #3a8371;
					color: #fff;
					padding-left: 25px;
					margin-top: 10px;
				}
				ul {
					li {
						padding: 10px;
						border-bottom: 1px dotted #299983;
						a {
							color: #299983;
						}
					}
				}
				.public_time {
					.time_item {
						width: 100%;
						padding: 5px;
						span {
							display: inline-block;
							width: 47%;
						}
					}
				}
			}
		}
		.right {
			flex: 3;

			.article_item {
				background-color: #fff;
				height: 35vh;
				margin-bottom: 10px;
				.title {
					font-size: 1.5em;
					color: #3a8371;
				}
				.cover {
					width: 40%;
					height: 100%;
					float: left;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						transition: all 0.3s linear;

						&:hover {
							transform: scale(1.1);
						}
					}
				}
				.desc {
					float: left;
					width: 60%;
					height: 100%;
					padding-left: 50px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					.title {
						font-size: 28px;
						margin: 15px 0;
					}
					p {
						margin: 15px 0;
						padding-right: 15px;
						line-height: 1.5em;
						height: 72px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
					}
				}
			}
			.pagination {
				clear: both;
				margin-top: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				li {
					list-style: none;
					margin: 10px;
				}
			}
		}
	}
}
/*footer*/
.footer {
	background: #242321;
	position: relative;
	height: 10vh;
	width: 100vw;

	.avatar {
		position: absolute;
		left: 40%;
		top: -10%;
		transform: translate(-50%, -50%);
		width: 15vh;
		height: 15vh;
		border: 2px solid #299983;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.info {
		color: #fff;
		position: absolute;
		left: 55%;
		top: 50%;
		transform: translate(-50%, -50%);
		h1 {
			margin-bottom: 10px;
		}
		p {
			color: #299983;
		}
	}
}
